import React, { PureComponent} from 'react';
import styles from './index.less'
import classnames from 'classnames'
import { map,isFunction } from 'lodash-es'
import { Tooltip } from 'antd'

class CardPane extends PureComponent{

    constructor(props) {
        super(props);

    }

    handleClickSite(curSite){
        this.setState({curSite},()=>{
            isFunction(this.props.handleClickSite)&&this.props.handleClickSite(curSite);
        });
    }

    render(){
        const { item,curSite } =  this.props;
        let paneStyle = classnames(styles['site-pane']);
        if(curSite&&curSite.id === item.id){
            paneStyle = classnames(styles['site-pane'],styles['active']);
        }
        return (
            <div className={styles['pane']} onClick={e=>{
                this.handleClickSite(item)
            }}>
                <div className={paneStyle}>
                    <div className={styles['site-head']}>
                        <Tooltip placement="topLeft" title={item&&item.title?item.title:'暂无'}>
                            {item&&item.title?item.title:'暂无'}
                        </Tooltip>
                    </div>
                    <div className={styles['site-body']}>
                        <div className={styles['info']}>
                            <Tooltip placement="topLeft" title={item&&item.address?item.address:'暂无'}>
                                地址:{item&&item.address?item.address:'暂无'}
                            </Tooltip>
                        </div>
                        <div className={styles['info']}>
                            <Tooltip placement="topLeft" title={item&&item.tel?item.tel:'暂无'}>
                                电话:{item&&item.tel?item.tel:'暂无'}
                            </Tooltip>
                        </div>
                        <div className={styles['info']}>
                            <Tooltip placement="topLeft" title={item&&item.location?`${item.location.lat},${item.location.lng}`:'暂无'}>
                                坐标:{item&&item.location?`${item.location.lat},${item.location.lng}`:'暂无'}
                            </Tooltip>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

// class SiteCard extends PureComponent {
//
//     constructor(props) {
//       super(props);
//       this.state = {
//         curSite:null
//       };
//     }
//
//     handleClickSite(curSite){
//         this.setState({
//           curSite
//         });
//       (this.props.handleClickSite&&isFunction(this.props.handleClickSite))&&this.props.handleClickSite(curSite);
//
//     }
//
//     render(){
//       const { curSite } = this.state;
//       return (
//         <div className={styles['site-card']}>
//           {
//             map(this.props.compData,(item,index)=>{
//               return (
//                 <CardPane curSite={curSite} handleClickSite={this.handleClickSite.bind(this)} item={item} key={index}/>
//               )
//             })
//           }
//         </div>
//       )
//     }
//
// }

CardPane.defaultProps = {
    compData:[]
};

export default CardPane;
